<template>
  <div class="animate" @keydown.tab.prevent="tabchange">
    <Background />
    <main v-show="!store.backgroundShow" :class="initialize ? 'show' : ''">
      <div class="toolbar" v-show="store.menuSelectShow">
        <Toolbar />
      </div>
      <div class="main-top"></div>
      <Timedate />
      <div style="height: 50px"></div>
      <transition name="el-fade-in-linear">
        <div class="center">
          <Search v-show="!store.menuSelectShow" />
          <!-- <transition name="el-zoom-in-top"> -->
          <MenuList v-show="store.menuSelectShow" />
          <!-- </transition> -->
        </div>
      </transition>
      <div
        class="dialog"
        v-show="store.loginshow || store.setshow"
        @click.stop="cleardialog"
        @contextmenu.stop.prevent=""
      >
        <UserLogin v-show="store.loginshow" />"
        <Set v-show="store.setshow"/>
      </div>
      <div class="app-content"></div>
      <div
        class="oneSay"
        v-show="!store.backgroundShow"
      >
        <Hitokoto />
      </div>
    </main>
  </div>
</template>

<script setup>
import { onMounted, onBeforeUnmount, watch, ref } from "vue";
import { helloInit, checkDays } from "@/utils/getTime.js";
import cursorInit from "@/utils/cursor.js";
import { homepage } from "@/store/index.js";

// 组件
import Background from "@/components/Background/index.vue";
import Timedate from "@/components/Timedate/index.vue";
import Search from "@/components/Search/index.vue";
import Hitokoto from "@/components/Hitokoto/index.vue";
import MenuList from "@/components/MenuList/index.vue";
import Toolbar from "@/components/Toolbar/index.vue";
import UserLogin from "@/components/UserLogin/index.vue";
import Set from "@/components/Set/index.vue";

// 起始页公共处理仓库
const store = homepage();
let initialize = ref(false); // 页面懒加载
// 页面初始化
onMounted(() => {
  let body = document.getElementsByTagName("body")[0];
  // 自定义鼠标
  // cursorInit();
  // 欢迎提示
  helloInit();
  // 加载完成
  loaded();
  // 开启樱花飘落
  store.Sakura();
  // 鼠标中键预览图片
  window.addEventListener("mousedown", (e) => {
    if (e.button == 1) {
      store.backgroundShow = !store.backgroundShow;
      document.getElementsByTagName("body")[0].className = "";
      if (store.backgroundShow) {
        ElMessage("开启壁纸预览模式");
        if (store.SakuraEffects) store.clearSakura();
      } else {
        ElMessage("关闭壁纸预览模式");
        if (store.SakuraEffects) store.Sakura();
      }
    }
  });
  setTimeout(() => {
    initialize.value = true;
  }, 1000);
});
// 加载完成
const loaded = () => {
  window.addEventListener("load", () => {
    console.log("加载完成");
    // 去除加载标记
    document.getElementsByTagName("body")[0].className = "";
    // 给加载动画添加结束标记
    let loadingBox = document.getElementById("loading-box");
    loadingBox.classList.add("loaded");
    store.loadstate = false;
  });
};

// 屏蔽右键
document.oncontextmenu = () => {
  if (store.searchshow) {
    store.closeMenuList();
  } else {
    store.openMenuList();
  }
  return false;
};

// tab键盘事件
const tabchange = () => {
  store.$patch((state) => {
    if (state.SE_type < state.SE_list.length - 1) {
      state.SE_type++;
    } else if (state.SE_type >= state.SE_list.length - 1) {
      state.SE_type = 0;
    }
  });
};


// 屏蔽F12
// function openSecs(dom) {
//   dom.open();
// }
</script>

<style scoped lang="scss">
// 加载动画层
.animate {
  transform: scale(1);
  transition: all ease 1.25s;
  opacity: 1;
  filter: blur(0);
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
  .oneSay {
    width: 100%;
    z-index: 2;
    overflow: hidden;
    min-height: 60px;
  }
  .app-content {
    flex: 1;
    width: 100%;
  }
}

.loading {
  .animate {
    transform: scale(1.2);
    transition: all ease 1.25s;
    opacity: 0;
    filter: blur(10px);
  }
}
main {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  z-index: 2;
  .main-top {
    height: 15vh;
    @media (max-height: 720px) {
      height: 8vh;
    }
  }
  .toolbar {
    position: absolute;
    top: 2vh;
    right: 3vh;
  }
  .dialog {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.5);
    z-index: 5;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(10px); //毛玻璃特效
    -webkit-backdrop-filter: blur(10px)
    // filter: blur(10px); // 模糊滤镜
  }
}
.show {
  opacity: 1 !important;
  transition: opacity 1s;
}
</style>
